<!--
 * @Date: 2022-05-09 18:46:12
 * @LastEditTime: 2022-12-10 10:11:28
 * @Description: 新建/修改收货地址
-->
<template>
  <view class="page-wrap">
    <!-- 顶部标题区域 -->
    <view class="address-header">
      <view class="header-content">
        <text class="header-title">地址信息</text>
        <view class="default-address-option">
          <text>默认收货地址</text>
          <radio :checked="formData.status === 1" @click="toggleDefaultAddress" color="#666" style="transform:scale(0.8);" />
        </view>
      </view>
    </view>

    <!-- 表单区域 - 与顶部区域分离 -->
    <view class="form-container">
      <view class="form-item">
        <view class="form-item-content">
          <view class="label required">收货人</view>
          <view class="right">
            <input
              v-model="formData.name"
              placeholder="请输入收货人姓名"
              placeholder-class="input-placeholder"
            />
          </view>
        </view>
      </view>

      <view class="form-item">
        <view class="form-item-content border">
          <view class="label required">手机号码</view>
          <view class="right">
            <input
              v-model="formData.mobile"
              placeholder="请输入手机号码"
              placeholder-class="input-placeholder"
            />
          </view>
        </view>
      </view>

      <view class="form-item">
        <view class="form-item-content border">
          <view class="label required">所在地区</view>
          <view class="right">
            <input
              disabled
              v-model="area"
              placeholder="选择地区"
              placeholder-class="input-placeholder"
              @click="openAddress"
            />
            <uni-icons type="right" color="#999999" size="16" />
          </view>
        </view>
      </view>

      <view class="form-item textarea">
        <view class="form-item-content border">
          <view class="label required">详细地址</view>
          <view class="right">
            <textarea
              maxlength="100"
              v-model="formData.site"
              placeholder="小区楼栋/乡村名称/门牌号..."
              placeholder-class="textarea-placeholder"
            />
          </view>
        </view>
      </view>
    </view>

    <view @click="submitAddress" class="save-btn">确定</view>

    <!-- 地址选择器 -->
    <lb-picker
      ref="areaPicker"
      mode="multiSelector"
      confirm-color="#333"
      :list="list"
      :level="3"
      @confirm="addressConfirm"
    ></lb-picker>
  </view>
</template>

<script>
import LbPicker from '@/components/lb-picker'
import addressData from '../../common/area-data-min'
export default {
  components: {
    LbPicker
  },
  data() {
    return {
      optionsData: '',
      list: addressData,
      title: '新建地址',
      formData: {
        id: '',
        name: '',
        mobile: '',
        province: '1',
        city: '1',
        area: '1',
        site: '',
        status: 2
      },
      area: '',
      areaList: []
    }
  },
  onLoad(options) {
    this.optionsData = options

    if (options.id) {
      this.title = '修改地址'
      this.getData()
    }
  },
  onReady() {
    uni.setNavigationBarTitle({ title: this.title })
  },
  methods: {
    /**
     * @description: 获取地址详情
     * @param {*}
     * @return {*}
     */
    getData() {
      this.req({
        url: '/v1/address/info',
        data: {
          id: this.optionsData.id
        },
        success: res => {
          console.log(res)
          if (res.code == 200) {
            Object.keys(this.formData).map(item => {
              this.formData[item] = res.data[item]
            })
            this.area = `${this.formData.province} ${this.formData.city} ${this.formData.area}`
          }
        }
      })
    },

    /**
     * @description: 提交地址
     * @param {*}
     * @return {*}
     */
    submitAddress() {
      if (this.formData.name == '') {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return
      }
      if (this.formData.mobile == '') {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      if (
        this.formData.province == '' ||
        this.formData.city == '' ||
        this.formData.area == ''
      ) {
        uni.showToast({
          title: '请选择地址',
          icon: 'none'
        })
        return
      }
      if (this.formData.site == '') {
        uni.showToast({
          title: '请输入详细地址',
          icon: 'none'
        })
        return
      }

      console.log(this.formData)
      // return

      this.req({
        url: '/v1/address/store',
        data: this.formData,
        success: res => {
          console.log(res)
          if (res.code == 200) {
            this.$common.toast({
              title: res.msg,
              icon: 'success',
              duration: 500,
              success: res => {
                this.$common.back()
              }
            })
          }
        }
      })
    },

    /**
     * @description: 确认选择地址
     * @param {*} e
     * @return {*}
     */
    addressConfirm(e) {
      console.log(e)
      let arr = e.item.map(item => item.label) // 城市

      this.formData.province = arr[0]
      this.formData.city = arr[1]
      this.formData.area = arr[2]

      this.area = arr.join(' ')
    },

    /**
     * @description: 关闭地址选择器
     * @param {*}
     * @return {*}
     */
    closeAddress() {
      this.$refs.areaPicker.hide()
    },

    /**
     * @description: 打开地址选择器
     * @param {*}
     * @return {*}
     */
    openAddress() {
      this.$refs.areaPicker.show()
    },

    /**
     * @description: 切换默认地址状态
     * @param {*}
     * @return {*}
     */
    toggleDefaultAddress() {
      this.formData.status = this.formData.status === 1 ? 2 : 1
    }
  }
}
</script>

<style lang="scss">
.page-wrap {
  background-color: #F0DBB0; /* 更新整体页面背景色 */
  min-height: 100vh;
  
  .address-header {
    padding: 20rpx 30rpx;
    margin-bottom: 20rpx; /* 添加底部间距，与表单区域分开 */
    
    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .header-title {
        font-size: 32rpx;
        font-weight: 400;
        color: #333;
      }
      
      .default-address-option {
        display: flex;
        align-items: center;
        
        text {
          font-size: 28rpx;
          color: #666;
          margin-right: 10rpx;
        }
      }
    }
  }
  
  .form-container {
    margin-top: 2rpx;
    
    .form-item {
      padding: 0;
      height: 100rpx;
      background: #FFF2D8; /* 表单项背景色 */
      margin-bottom: 1rpx;
      
      &-content {
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        
        &.border {
          border-top: 1px solid rgba(240, 240, 240, 0.3);
        }
        
        .label {
          width: 166rpx;
          font-size: 32rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #222222;
          position: relative;
          
          &.required::after {
            content: '*';
            color: #f56c6c;
            margin-left: 4rpx;
            font-size: 28rpx;
            position: absolute;
          }
        }
        
        .right {
          width: calc(100% - 166rpx);
          display: flex;
          align-items: center;
          justify-content: flex-end;
          
          input,
          textarea {
            flex: 1;
            font-size: 28rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #333333;
            background-color: transparent;
            text-align: right;
          }
          
          .input-placeholder,
          .textarea-placeholder {
            color: #999;
            font-size: 28rpx;
            text-align: right;
          }
          
          .icon {
            width: 32rpx;
            height: 32rpx;
            margin-left: 10rpx;
          }
        }
      }
    }
    
    .textarea {
      height: auto;
      
      .form-item-content {
        padding: 30rpx;
        align-items: flex-start;
        
        .right {
          textarea {
            height: 100rpx;
          }
        }
      }
    }
  }

  .save-btn {
    position: fixed;
    bottom: 50rpx;
    left: 30rpx;
    width: 690rpx;
    height: 88rpx;
    background: #f56c6c; /* 红色按钮 */
    border-radius: 8rpx; /* 方形圆角按钮 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
